import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import piniaPersistConfig from "@/utils/persist"
import {
	hexToRgb,
	shadeColor,
	desaturateColor,
	contrastingColor,
	similarColor,
	getRandomColor
} from '@/common/color.js'
export const useColorStore = defineStore('color', () => {
	const color = ref('#3C78FF')
	const setColor = () => {
		//此处可接口获取主题色
		console.log('切换颜色')
		color.value = getRandomColor()
	}
	
	// 计算相似色,返回三种相似色
	const similar_colors = computed(() => {
		if(!color.value) return;
		return similarColor(color.value)
	})
	
	// 计算相反色
	const inverse_color = computed(() => {
		if(!color.value) return;
		return contrastingColor(color.value)
	})
	
	const publicStyles = computed(() => {
		return {
			'--color':color.value,
			'--color-s1':similar_colors.value[0],
			'--color-s2':similar_colors.value[1],
			'--color-s3':similar_colors.value[2],
			'--color-i':inverse_color.value,
			'--shadow':'#ccd5f0',
			'--gray-9':'#999999',
			'--gray-6':'#666666',
			'--gray-3':'#333333',
		}
	})
	

	// return 仓库数据，外部调用
	return {
		color,
		similar_colors,
		inverse_color,
		setColor,
		publicStyles
	}
}, {
	persist: piniaPersistConfig('colorStore')
}
)